<!--
  增删改查示例
  @author 邵鹏坤 2022年9月22日
  1 功能解析：
    1.1 列表展示
      1.1.1 数据源：示例
        tableData：Array<{
          name:'张三'，
          height:180，
          weight:200，
          birth:’2022-9-22 21：02：30，
          ...
        }>
    1.2 ...
  2 数据源：
-->
<template>
  <ExampleTitle title="crud示例"></ExampleTitle>
  <ExampleTitle title="基础用法" :row="true"> </ExampleTitle>
  <ExampleMessage>默认列向左对齐，行充满容器</ExampleMessage>
  <ExampleMessage>如果columns中不指定width属性，则列宽度自适应</ExampleMessage>
  <ExampleMessage>keyName 用于给v-for指定数据的key</ExampleMessage>
  <div class="row-container">
    <WinCrud :data="tableData" :columns="columns1" keyName="name"> </WinCrud>
  </div>
  <MD file-name="defaultCrud"></MD>
  <ExampleTitle title="指定列宽度" :row="true"> </ExampleTitle>
  <ExampleMessage>宽度默认单位‘px’</ExampleMessage>
  <ExampleMessage>部分列指定宽度，则没有指定宽度的自适应宽度</ExampleMessage>
  <div class="row-container">
    <WinCrud :data="tableData" :columns="columns2" keyName="name"> </WinCrud>
  </div>
  <MD file-name="setWidthCrud"></MD>
  <ExampleTitle title="当前行高亮显示" :row="true"> </ExampleTitle>
  <ExampleMessage>只需配置 :highlight="true"</ExampleMessage>
  <div class="row-container">
    <WinCrud :data="tableData" :columns="columns2" keyName="name" :highlight="true"> </WinCrud>
  </div>
  <MD file-name="defaultCrud"></MD>
  <ExampleTitle title="表格斑马纹" :row="true"> </ExampleTitle>
  <ExampleMessage>只需配置 :stripe="true"</ExampleMessage>
  <div class="row-container">
    <WinCrud :data="tableData" :columns="columns2" keyName="name" :highlight="true" :stripe="true"> </WinCrud>
  </div>
  <ExampleTitle title="需要序号列" :row="true"> </ExampleTitle>
  <ExampleMessage>只需配置 :index="true"</ExampleMessage>
  <div class="row-container">
    <WinCrud :data="tableData" :columns="columns2" keyName="name" :highlight="true" :stripe="true" :index="true">
    </WinCrud>
  </div>
  <ExampleTitle title="需要边框" :row="true"> </ExampleTitle>
  <ExampleMessage>只需配置 :border="true"</ExampleMessage>
  <div class="row-container">
    <WinCrud
      :data="tableData"
      :columns="columns2"
      keyName="name"
      :highlight="true"
      :stripe="true"
      :index="true"
      :border="true"
    >
    </WinCrud>
  </div>
  <ExampleTitle title="单元格对齐方式" :row="true"> </ExampleTitle>
  <ExampleMessage>只需配置 :direction="center"</ExampleMessage>
  <ExampleMessage>可选值为：left,center,right</ExampleMessage>
  <div class="row-container">
    <WinCrud
      :data="tableData"
      :columns="columns2"
      keyName="name"
      :highlight="true"
      :stripe="true"
      :index="true"
      :border="true"
      direction="center"
    >
    </WinCrud>
  </div>
  <ExampleTitle title="限制表格宽高" :row="true"> </ExampleTitle>
  <ExampleMessage>配置 :width="540" && :height="180"</ExampleMessage>
  <ExampleMessage>超出表格宽高的部分会被隐藏，并出现滚动条</ExampleMessage>
  <div class="row-container">
    <WinCrud
      :data="tableData"
      :columns="columns2"
      keyName="name"
      :highlight="true"
      :stripe="true"
      :index="true"
      :border="true"
      :width="640"
      :height="180"
    >
    </WinCrud>
  </div>
  <ExampleTitle title="可更改尺寸的" :row="true"> </ExampleTitle>
  <ExampleMessage>配置 :resizable="true"</ExampleMessage>
  <ExampleMessage>只需要将光标移入想要改变宽度的列头，滑动滚轮即可</ExampleMessage>
  <ExampleMessage>没有设置宽度的列不可改变宽度，一直是自适应宽度</ExampleMessage>
  <div class="row-container">
    <WinCrud
      :data="tableData"
      :columns="columns2"
      keyName="name"
      :highlight="true"
      :stripe="true"
      :index="true"
      :border="true"
      :resizable="true"
    >
    </WinCrud>
  </div>
  <ExampleTitle title="右键菜单" :row="true"> </ExampleTitle>
  <ExampleMessage>右键行数据会出现一个菜单栏，可以赋予删除修改等操作</ExampleMessage>
  <ExampleMessage>按钮点击事件需要传入一个callback，方法接收两个参数，(被点击按钮的id，当前行数据)</ExampleMessage>
  <div class="row-container">
    <WinCrud
      :data="tableData"
      :columns="columns2"
      keyName="name"
      :highlight="true"
      :stripe="true"
      :index="true"
      :border="true"
      :mouseMenu="mouseMenu"
      @dialogCB="dialogCB"
    >
    </WinCrud>
  </div>
  <MD file-name="rightMenuCrud"></MD>
</template>

<script setup lang="ts">
  import WinCrud from './components/winCrud.vue'
  import ExampleTitle from '@/views/components/exampleTitle.vue'
  import ExampleMessage from '@/views/components/exampleMessage.vue'
  import { ref } from 'vue'
  import Message from '@/views/message/message'
  import MD from '@/views/components/md.vue'
  const tableData = ref<Array<any>>([
    {
      name: '张三',
      height: 180,
      weight: 200,
      birthDay: '1998-04-25 00:01:02'
    },
    {
      name: '李四',
      height: 180,
      weight: 200,
      birthDay: '1998-04-25 00:01:02'
    },
    {
      name: '王二',
      height: 180,
      weight: 200,
      birthDay: '1998-04-25 00:01:02'
    },
    {
      name: '孙八',
      height: 180,
      weight: 200,
      birthDay: '1998-04-25 00:01:02'
    },
    {
      name: '赵四',
      height: 180,
      weight: 200,
      birthDay: '1998-04-25 00:01:02'
    }
  ])
  const columns1 = ref<
    Array<{
      // 用于绑定data里的数据字段名
      field: string
      // 用于渲染在列头上的列明
      listed: string
      // 指定列宽度
      width?: number
    }>
  >([
    {
      field: 'index',
      listed: '序号'
    },
    {
      field: 'name',
      listed: '姓名'
    },
    {
      field: 'height',
      listed: '身高'
    },
    {
      field: 'weight',
      listed: '体重'
    },
    {
      field: 'birthDay',
      listed: '生日'
    }
  ])
  const columns2 = ref<
    Array<{
      // 用于绑定data里的数据字段名
      field: string
      // 用于渲染在列头上的列明
      listed: string
      width?: number
    }>
  >([
    {
      field: 'index',
      listed: '序号',
      width: 140
    },
    {
      field: 'name',
      listed: '姓名',
      width: 140
    },
    {
      field: 'height',
      listed: '身高',
      width: 140
    },
    {
      field: 'weight',
      listed: '体重'
    },
    {
      field: 'birthDay',
      listed: '生日',
      width: 360
    }
  ])
  const mouseMenu = ref({
    mouseData: 'name',
    title: true,
    buttons: [
      {
        id: 'edit',
        icon: 'icon-jurassic_edit-data',
        text: '修改行数据'
      },
      {
        id: 'delete',
        icon: 'icon-jurassic_delete-form',
        text: '删除行数据'
      },
      {
        id: 'addToGroup',
        icon: 'icon-ic-add-database',
        text: '添加至分组'
      },
      {
        id: 'share',
        icon: 'icon-fenxiang',
        text: '分享'
      },
      {
        id: 'like',
        icon: 'icon-shoucang',
        text: '收藏'
      }
    ]
  })
  const dialogCB = (id: string, row: any) => {
    switch (id) {
      case 'edit':
        Message({
          type: 'success',
          message: '修改成功'
        })
        break
      case 'delete':
        Message({
          type: 'loading',
          message: '删除中'
        }).then((res) => {
          setTimeout(() => {
            res.change({
              type: 'error',
              text: '网络超时，删除失败！',
              always: true
            })
          }, 1500)
        })
        break
      case 'addToGroup':
        Message({
          type: 'info',
          message: '已添加至分组'
        })
        break
      case 'like':
        Message({
          type: 'warning',
          message: '请谨慎收藏!!!'
        })
        break
      case 'share':
        Message({
          type: 'loading',
          always: true,
          message: '分享中'
        }).then((res) => {
          setTimeout(() => {
            res.change({
              type: 'warning',
              text: '分享超时了，可能会失败！',
              always: true
            })
          }, 1500)
        })
        break
    }
  }
</script>

<style lang="scss" scoped>
  .example-title {
    font-size: $example-title-fontsize;

    .example-title-flag {
      color: $example-title-flag-color;
    }
  }
</style>
